<template>
  <div class="app-container" id="role">
    <div class="table-operation">
      <AuthButton @click="c()" name="新增" />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="角色名称" prop="name" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <AuthButton
            @click="adminEmpower(row)"
            name="后台功能授权"
            />
          <AuthButton
            @click="mpEmpower(row)"
            name="小程序功能授权"
            />
          <template v-if="Number(row.roleId) > 0">
            <AuthButton @click="u(row, 'cache')" name="编辑" />
            <AuthButton @click="d({ id: row.roleId })" name="删除" />
          </template>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="角色名称" prop="name" :verify="{ maxLength: 20 }">
          <el-input
            v-model="form.data.name"
            placeholder="请输入角色名称"
            clearable
          />
        </el-form-item>
      </template>
    </KiFormDialog>

    <KiFormDialog
      :show.sync="permission.show"
      title="后台功能授权"
      v-model="permission.data"
      :retrieve="permissionDataGetter"
      :submit="permissionSubmit"
    >
      <AuthTree v-model="permission.data.permissionTree" />
    </KiFormDialog>

    <KiFormDialog
      :show.sync="mpCapacity.show"
      title="小程序功能授权"
      v-model="mpCapacity.data"
      :retrieve="mpCapacityDataGetter"
      :submit="mpCapacitySubmit"
    >
			<template #el-form>
				<ul class="info-warning">
					<li>核销功能可使用手机号登录，建议需要核销功能的用户都绑定手机号</li>
					<li>可在管理后台【系统管理--账号与权限--用户列表中】为用户绑定手机号</li>
				</ul>
				<!-- 票类 -->
				<el-form-item label="可核销哪些店铺的票类商品" prop="verifyTicketType" verify>
					<KiSelect
						v-model="mpCapacity.data.verifyTicketType"
						:options="options1"
						placeholder="请选择"
            @change="mpCapacity.data.verifyTicketMchIds = []"
					/>
        </el-form-item>
				<el-form-item 
					v-if="mpCapacity.data.verifyTicketType == 2" 
					label="关联店铺" 
					prop="verifyTicketMchIds"
          verify
				>
          <ShopSpot v-model="mpCapacity.data.verifyTicketMchIds"/>
        </el-form-item>
				<!-- 券类 -->
				<el-form-item label="可核销哪些店铺的券类商品" prop="verifyCouponType" verify>
					<KiSelect
						v-model="mpCapacity.data.verifyCouponType"
						:options="options2"
						placeholder="请选择"
            @change="mpCapacity.data.verifyCouponMchIds = []"
					/>
        </el-form-item>
				<el-form-item 
					v-if="mpCapacity.data.verifyCouponType == 2" 
					label="关联店铺" 
					prop="verifyCouponMchIds"
          verify
				>
          <ShopSpot v-model="mpCapacity.data.verifyCouponMchIds"/>
        </el-form-item>
				<!-- 景区 -->
				<el-form-item label="可核销哪些景区的预约" prop="verifyReservationType" verify>
					<KiSelect
						v-model="mpCapacity.data.verifyReservationType"
						:options="options3"
						placeholder="请选择"
            @change="mpCapacity.data.verifyReservationScenicIds = []"
					/>
        </el-form-item>
				<el-form-item 
					v-if="mpCapacity.data.verifyReservationType == 2" 
					label="关联景区" 
					prop="verifyReservationScenicIds"
          verify
				>
          <ScenicSpot v-model="mpCapacity.data.verifyReservationScenicIds"/>
        </el-form-item>
			</template>	
    </KiFormDialog>
  </div>
</template>
<script>
import AuthTree from '@/components/AuthTree/index.vue'
import ShopSpot from '@/components/ShopSpot'
import ScenicSpot from '@/components/ScenicSpot'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  components: { 
		AuthTree, 
		ShopSpot,
		ScenicSpot 
	},
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/sys/role',
      axiosConfig: {
        getList: {
          url: 'list'
        },
        d: {
          method: 'DELETE'
        }
      },
      form: {
        data: {
          companyId: null,
          name: null,
          curPage: {
            name: '',
            hasPermission: false,
            pageButtonList: []
          }
        }
      },
      list: {
        dataAt: 'data'
      }
    }),
  data () {
    return {
      permission: {
        show: false,
        data: {
          permissionTree: []
        }
      },
      mpCapacity: {
        show: false,
				roleId: '',
        data: {}
      },
			// 票类
			options1: [{
				dataValue: 0,
				dataName: '不可核销'
			}, {
				dataValue: 1,
				dataName: '可核销本商户所有店铺票类商品'
			}, {
				dataValue: 2,
				dataName: '手动选择店铺'
			}],
			// 券类
			options2: [{
				dataValue: 0,
				dataName: '不可核销'
			}, {
				dataValue: 1,
				dataName: '可核销本商户所有店铺券类商品'
			}, {
				dataValue: 2,
				dataName: '手动选择店铺'
			}],
			// 景区
			options3: [{
				dataValue: 0,
				dataName: '不可核销'
			}, {
				dataValue: 1,
				dataName: '可核销本企业所有景区预约'
			}, {
				dataValue: 2,
				dataName: '手动选择景区'
			}],
    }
  },
  methods: {
    adminEmpower (row) {
      this.permission.data = {
        ...this.permission.data,
        ...this.$lo.cloneDeep(row)
      }
      this.permission.show = true
    },
    permissionDataGetter () {
      return this.$GET('sot-admin-api/sys/role/resourceForSelect', {
        domainId: import.meta.env.VITE_APP_domainId,
        roleId: this.permission.data.roleId
      }).then(res => {
        if (res.data?.length) {
          this.permission.data.permissionTree = res.data
        }
      })
    },
    permissionSubmit () {
      return this.$POST('sot-admin-api/sys/role/authorize', {
        roleId: this.permission.data.roleId,
        permissions: this.permission.data.permissionTree
      }).then(res => {
        if (res.errorCode == '00000') {
          this.$swal.success('提交成功！')
        } else {
          this.$swal.error(res.message)
        }
      })
    },
    submit () {
      return this.submitForm(
        {
          c: {
            name: this.form.data.name
          },
          u: {
            name: this.form.data.name,
            roleId: this.form.data.roleId
          }
        }[this.form.status]
      )
    },
    mpEmpower (row) {
      this.mpCapacity.id = this.$lo.cloneDeep(row).roleId; // 角色id
			this.mpCapacity.show = true
    },
    mpCapacityDataGetter() {
			return this.$POST('sot-admin-api/sys/app-perm/queryForDetail', {
        id: this.mpCapacity.id,
      }).then(res => {
        if (res.errorCode === '00000') {
					this.mpCapacity.data = res.data
				}
      })
    },
    mpCapacitySubmit() {
			let data = this.mpCapacity.data;
      if (data.verifyTicketType == 2 && !this.judgeVal(data.verifyTicketMchIds)) {
        this.$swal.warning('请选择可核销的店铺')
        return {
          show: true,
        }
      }
      if (data.verifyCouponType == 2 && !this.judgeVal(data.verifyCouponMchIds)) {
        this.$swal.warning('请选择可核销的店铺')
        return {
          show: true,
        }
      }
      if (data.verifyReservationType == 2 && !this.judgeVal(data.verifyReservationScenicIds)) {
        this.$swal.warning('请选择可核销的景区')
        return {
          show: true,
        }
      }
			return this.$POST('sot-admin-api/sys/app-perm/save', {
				...data
      }).then(res => {
        if (res.errorCode == '00000') {
          this.$swal.success('提交成功！')
        } else {
          this.$swal.error(res.message)
        }
      })
    },
    judgeVal(vals) {
      if (vals && 0 < vals.length) {
        return true;
      }else {
        return false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:deep .el-dialog{
  min-width: 960px !important;
}
.info-warning {
  color: #409eff;
  line-height: 25px;
  letter-spacing: 1px;
  padding: 0;
  margin: 12px 0 0;
}
</style>
